<template>
    <div class="mb-16 xl:px-[200px] lg:px-[100px] px-[50px]">
        <div class="flex">
            <div class="flex-1">
                <div class="my-16 flex justify-between">
                    <div class="text-2xl text-slate-800">讨论/文章</div>
                    <div>
                        <el-button :icon="Refresh" @click="refresh"
                            >刷新</el-button
                        >
                        <el-button
                            class="ml-2"
                            :icon="Plus"
                            @click="router.push(`/article-edit/add`)"
                            >发布</el-button
                        >
                    </div>
                </div>
                <div>
                    <ArticleItem
                        v-for="item in data.rows"
                        :item="item"
                        @click="router.push(`/article/${item.id}`)"
                    />
                </div>
                <div class="mt-8">
                    <el-pagination
                        :page-size="10"
                        layout="prev, pager, next"
                        :total="data.count"
                        @current-change="pageChange"
                    />
                </div>
            </div>
            <div class="w-[350px]">
                <Hot class="mt-16" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getListUnauth } from '@/apis/unauthCrud'
import { Plus, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ArticleItem from './ArticleItem.vue'
import Hot from './Hot.vue'

const data = ref({
    count: 0,
    rows: [] as any[],
})
const page = ref(1)

const router = useRouter()

const getData = async (page = 1) => {
    const res = await getListUnauth(
        'articles',
        {
            page,
            pageSize: 10,
            attributes: {
                excluede: ['content'],
            },
        },
        [
            {
                model: 'users',
                attributes: ['id', 'nickname', 'avatar'],
                as: 'user',
            },
        ]
    )
    if (!res.success) return
    data.value = res.data
}

getData()

const refresh = () => {
    getData(page.value)
}

const pageChange = (val) => {
    page.value = val
    getData(val)
}
</script>

<style scoped></style>
